<template>
  <div class="page-wide">
    <a-row :gutter="24">
      <a-col :sm="24" :md="15" :xl="15" :style="{ marginBottom: '15px' }">
        <a-card title="全行系统实时性能图" :bordered="false" :headStyle="{ padding: '0 15px', border:0}" style="width:100%">
          <system-last></system-last>
          <!-- <a-row>
            <a-col :sm="24" :md="9" :xl="9">
              <div id="myChart" :style="{width: '100%', height: '340px', background: '#fff'}"></div>
            </a-col>
          </a-row> -->
        </a-card>
        <a-card title="ESB性能趋势图" :bordered="false" :headStyle="{ marginTop: '15px', padding: '0 15px', border:0}" :body-style="{ padding: '0 10px'}" style="width:100%">
          <bar-chart id="esbperf" :opiton="optionEsbperf" style="width:100%; height:250px"></bar-chart>
        </a-card>
      </a-col>
      <a-col :sm="24" :md="9" :xl="9" :style="{ marginBottom: '15px' }">
        <a-card title="ESB系统超时链路排名" :bordered="false" :headStyle="{ padding: '0 15px', marginBottom: 0, border:0}" :body-style="{ padding: '0 10px'}" style="width:100%">
          <div class="overtimelinks-list">
            <ul class="overtimelinks-header">
              <li class="th0">序号</li>
              <li class="th1">系统链路</li>
              <li class="th2">一分钟交易量</li>
              <li class="th3">交易耗时</li>
            </ul>
            <ul class="overtimelinks-body" v-for="(overtime,index) in overtimelinks" :key="index" >
              <li class="td0">{{ index+1 }}</li>
              <li class="td1">{{ overtime.name }}</li>
              <li class="td2">{{ overtime.transCount }}</li>
              <li class="td3">
                <span :style="{color:(overtime.useTime > 1500) ? '#c03636':(overtime.useTime >= 500 && overtime.useTime < 1500) ? '#c9852f':(overtime.useTime < 500) ?'#2572bf':'#2572bf'}">{{ overtime.useTime }}</span>
              </li>
            </ul>
          </div>
        </a-card>
        <a-card title="ESB受理交易的交易量排名" :bordered="false" :headStyle="{ padding: '0 15px', marginTop: '15px', border:0}" :body-style="{ padding: '0 10px'}" style="width:100%">
          <service-count></service-count>
        </a-card>
        <a-card title="ESB受理系统的交易量排名" :bordered="false" :headStyle="{ padding: '0 15px', marginTop: '15px', border:0}" :body-style="{ padding: '0 10px'}" style="width:100%">
          <system-count></system-count>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import moment from 'moment'
import axios from 'axios'
import systemLast from './modules/systemLast'
import barChart from './modules/barChart'
import serviceCount from './modules/serviceCount'
import systemCount from './modules/systemCount'
import $ from 'jquery'
export default {
  name: 'ChannelMonitor',
  components: {
    systemLast,
    barChart,
    serviceCount,
    systemCount
  },
  data () {
    return {
      loading: false,
      overtimelinks: [], // 系统与系统间交易链路量和耗时
      optionEsbperf: {
        title: {
          text: 'ESB性能趋势图',
          top: 'top',
          left: 'center',
          textStyle: {
            fontSize: 14,
            fontWeight: 'bolder',
            color: '#fff' // 主标题文字颜色
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            label: {
              show: true
            }
          }
        },
        grid: {
          left: '5%',
          top: '20%',
          right: '5%',
          bottom: '23%'
        },
        legend: {
          data: ['交易量', '耗时'],
          top: '10%',
          textStyle: {
            color: '#999',
            fontSize: 12
          }
        },
        dataZoom: [
          {
          type: 'inside'// inside表示内置的鼠标缩放滑动
          }
        ],
        xAxis: {
          data: [],
          axisLine: {
            show: false, // 隐藏X轴轴线
            lineStyle: {
              color: '#3d5269',
              width: 1
            }
          },
          axisTick: {
            show: true, // 隐藏X轴刻度
            alignWithLabel: true
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#396A87', // X轴文字颜色
              fontSize: 12
            },
            interval: 'auto',
            rotate: 270
          }
        },
        yAxis: [{
            type: 'value',
            name: '交易量',
            nameTextStyle: {
              color: '#999',
              fontSize: 13
            },
            splitLine: {
              show: true,
              lineStyle: {
                width: 1,
                color: '#3d5269',
                type: 'dashed' // 设置网格线类型 dotted：虚线solid:实线
              }
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#396A87',
                fontSize: 12
              }
            }
          },
          {
            type: 'value',
            name: '耗时',
            nameTextStyle: {
              color: '#999',
              fontSize: 13
            },
            position: 'right',
            splitLine: { // 网格线
              lineStyle: {
                color: ['#555'],
                width: 1,
                type: 'dashed'// 设置网格线类型 dotted：虚线solid:实线
              },
              show: true // 隐藏或显示
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: '#396A87',
                width: 2
              }
            },
            axisLabel: {
              show: true,
              formatter: '{value}', // 右侧Y轴文字显示
              textStyle: {
                color: '#396A87',
                fontSize: 12
              }
            }
          }
        ],
        series: [{
          name: '交易量',
          type: 'bar',
          barWidth: 18,
          itemStyle: {
            normal: {
              color: {
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [{
                    offset: 0, color: '#2a74bc' // 0% 处的颜色
                }, {
                    offset: 1, color: '#7193ab' // 100% 处的颜色
                }],
                global: false // 缺省为 false
                }
              }
            },
            data: []
          },
          {
            name: '耗时',
            type: 'line',
            smooth: true, // 折线平滑
            yAxisIndex: 1, // 使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
            showAllSymbol: true, // 显示所有图形。
            // symbol: "circle", // 标记的图形为实心圆
            symbolSize: 2, // 标记的大小
            itemStyle: {
              color: '#3baaea', // 折线拐点标志的样式
              width: 1
            },
            lineStyle: {
              color: '#3baaea'
            },
            data: []
          }
        ]
      }
    }
  },
  created () {
    this.getSystosyslast()
    this.getEsbperfData()
  },
  mounted () {
    console.log('-------------')
    this.slideUp($('.overtimelinks-list'))
  },
  methods: {
    /**
    * 系统和系统的关系图
    **/
    getSystosyslast () {
      // console.log('系统和系统的关系图-----')
      axios.get('../data/systosyslast.json').then((res) => { 
        this.overtimelinks = res.data.data.overtimelinks
      })
    },
    /**
    * ESB时点性能数据
    **/
    getEsbperfData () {
      const _this = this
      axios.get('../data/esbperf.json').then((res) => {
        // 用axios的方法引入地址-赋值
        // console.log('ESB时点性能数据------', res.data.data.esbperf)
        _this.optionEsbperf.xAxis.data = []
        _this.optionEsbperf.series[0].data = []
        _this.optionEsbperf.series[1].data = []
        res.data.data.esbperf.forEach(function (item) {
          item.time = moment(item.time).format('HH:mm')
          _this.optionEsbperf.xAxis.data.push(item.time)
          _this.optionEsbperf.series[0].data.push(item.transCount)
          _this.optionEsbperf.series[1].data.push(item.useTime)
        })
      }).catch(function (error) { // 请求失败处理
        console.log(error)
      })
    },
    /**
    * 向上滚动特效
    * @param {*} event 
    * @param {*} config 
    */
    slideUp (event, config) {
      config = $.extend({
        li_h: 31,
        time: 2000,
        movetime: 1500
      }, config)

      // 向上滑动动画
      function autoani () {
        $('.overtimelinks-body:first', event).animate({
          'margin-top': -config.li_h
        }, config.movetime, function () {
          $(this).css('margin-top', 0).appendTo(event)
        })
      }
      // 自动间隔时间向上滑动
      var anifun = setInterval(autoani, config.time)
      // 悬停时停止滑动，离开时继续执行
      // $(event).children(".serviceidcount-body").hover(function () {
      $(event).hover(function () {
        clearInterval(anifun) // 清除自动滑动动画
      }, function () {
        anifun = setInterval(autoani, config.time) // 继续执行动画
      })
    }
  }
}
</script>

<style lang="less" scoped>
.page-wide{
  .overtimelinks-list{
    padding: 0 7px;
    // background: #111;
    opacity: 0.8;
    height: 170px;
    overflow: hidden;
    position: relative;
    margin-bottom: 10px;
    .overtimelinks-header{
      overflow: hidden;
      list-style: none;
      padding: 0;
      margin: 0;
      border-bottom: 2px solid #4b7797;
      font-size: 1.3rem;
      position: relative;
      z-index: 100000;
      background: #4b7797;
      li{
				float: left;
				height: 31px;
				line-height: 31px;
				padding:0 5px;
				color: #fff;
				font-size: 14px;
				position: relative;
				z-index: 100000;
			}
      .th0{
				float: left;
				width: 9%;
      }
      .th1{
				float: left;
				width: 45%;
      }
      .th2{
				float: left;
				width: 26%;
			}
			.th3{
				float: left;
				width: 20%;
			}
    }
    .overtimelinks-body{
      overflow: hidden;
      list-style: none;
      padding: 0;
      margin: 0;
      border-bottom: 1px solid #4b7797;
      position: relative;
      z-index: 1000;
      li{
				float: left;
				padding:0 5px;
				height: 31px;
        line-height: 31px;
        font-size: 13px;
				color: #333;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
      }
      .td0{
				float: left;
				width: 9%;
			}
			.td1{
				float: left;
				width: 45%;
			}
			.td2{
				float: left;
				width: 26%;
			}
			.td3{
				float: left;
				width: 20%;
			}
    }
  }
}
</style> 
